<template>
  <TabPane
    :name="name"
    :label="label"
    class="playlist-box"
  >
    <Row>
      <i-col span="6">
        <List class="playlist-list">
          <ListItem>
            <ListItemMeta>
              <i
                slot="avatar"
                class="material-icons"
              >add</i>
              <div
                v-if="isNewPlEditing"
                slot="title"
              >
                <Input
                  v-model="newPlTitle"
                  placeholder="请输入歌单名"
                  clearable
                />
                <i
                  class="material-icons"
                  @click="handleCancleCreatePl"
                >cancel</i>
                <i
                  class="material-icons"
                  @click="handleCreatePl"
                >check_circle</i>
              </div>
              <div
                v-else
                slot="title"
                @click="handleCreatePlItemClicked"
              >
                新建歌单
              </div>
            </ListItemMeta>
          </ListItem>
          <ListItem
            key="playList-0"
            :class="0 === activedPlayListId ? 'playlist-item active' : 'playlist-item'"
            @click.native.prevent="handleListClicked(0)"
          >
            <ListItemMeta
              title="我喜欢"
            >
              <i
                slot="avatar"
                class="material-icons fav"
              >favorite</i>
            </ListItemMeta>
          </ListItem>
          <ListItem
            v-for="playList in playLists"
            :key="`playList-${playList.id}`"
            :class="playList.id === activedPlayListId ? 'playlist-item active' : 'playlist-item'"
            @click.native.prevent="handleListClicked(playList.id)"
          >
            <ListItemMeta
              :title="playList.title"
            >
              <i
                slot="avatar"
                class="material-icons"
              >queue_music</i>
            </ListItemMeta>
          </ListItem>
        </List>
      </i-col>
      <i-col span="18">
        <p v-if="activedPlayListId === null">
          请选择歌单
        </p>
        <div v-else>
          <Dropdown
            v-if="activedPlayListId>0"
            trigger="click"
            @on-click="handleMenuClicked"
          >
            <a href="javascript:void(0)">
              <i class="material-icons">more_horiz</i>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="remove">
                删除
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <SongsTable
            :user-id="userId"
            :play-list-id="activedPlayListId"
          />
        </div>
      </i-col>
    </Row>
  </TabPane>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { PlayList, getPlayLists, createPlayList, removePlayList } from '@/api/resources'
import { cdn } from '@/utils'
import SongsTable from '../compoments/SongsTable.vue'
import { DeepPartial } from 'ts-essentials'

@Component({
  name: 'PlayListTab',
  components: {
    SongsTable
  }
})
export default class extends Vue {
  private readonly name = 'play-list'
  private readonly label = '歌单'
  @Prop() userId!: number
  private activedPlayListId = 0
  private playLists: Partial<PlayList>[] = []
  private isNewPlEditing = false
  private newPlTitle = ''

  get params (): CreateQueryParams {
    return {
      search: {
        'belongsToUser.id': this.userId
      },
      join: [{
        field: 'belongsToUser'
      }]
    }
  }

  private async updateData () {
    if (typeof this.userId !== 'number') return

    const { data } = await getPlayLists(this.params)
    this.playLists = data
  }

  private fullUrl = cdn

  @Watch('userId')
  private handleUserIdUpdated () {
    this.updateData()
  }

  private handleListClicked (id: number) {
    this.activedPlayListId = id
  }

  private handleCreatePlItemClicked () {
    this.isNewPlEditing = true
  }

  private async handleCreatePl () {
    if (this.newPlTitle === '') return
    const params: CreateQueryParams = {
      join: { field: 'belongsToUser' }
    }
    const dto: DeepPartial<Exclude<PlayList, 'id'>> = {
      title: this.newPlTitle,
      belongsToUser: {
        id: this.userId
      }
    }
    await createPlayList(dto, params)
    this.$Message.success('歌单创建成功！')
    this.updateData()
    this.isNewPlEditing = false
    this.newPlTitle = ''
  }

  private handleCancleCreatePl () {
    this.isNewPlEditing = false
  }

  private handleMenuClicked (item: string) {
    switch (item) {
      case 'remove':
        this.$Modal.confirm({
          title: '删除歌单？',
          onOk: () => {
            removePlayList(this.activedPlayListId).then(() => {
              this.updateData()
              this.$Message.success('歌单删除成功！')
            })
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.playlist-box {
  .playlist-list {
    padding-right: 16px;
    .playlist-item {
      &.active {
        background-color: lighten(@dark-bg-color, 10%)
      }
      i.fav {
        color: @red;
      }
    }
  }

}

</style>
